import 'package:animations/animations.dart';
import 'package:flutter/material.dart';
import 'package:flutter_study/provider/category_page_model.dart';
import 'package:flutter_study/widget/category_widget_item.dart';
import 'package:flutter_study/widget/loading_container.dart';
import 'package:flutter_study/widget/provider_widget.dart';

import 'category_detail_page.dart';

class CategoryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CategoryPageState();
  }
}

class _CategoryPageState extends State<CategoryPage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ProviderWidget<CategoryPageModel>(
        model: CategoryPageModel(),
        onModelInit: (model) {
          model.loadData();
        },
        builder: (context, model, child) {
          return LoadingContainer(
              loading: model.loading,
              error: model.error,
              retry: model.retry,
              child: _buildGrIdView(context, model));
        });
  }

  @override
  bool get wantKeepAlive => true;

  _buildGrIdView(BuildContext context, CategoryPageModel m) {
    return Container(
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(color: Color(0xfff2f2f2)),
      child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, mainAxisSpacing: 5, crossAxisSpacing: 5),
          itemCount: m.list.length,
          itemBuilder: (context, index) {
            return OpenContainer(closedBuilder: (context, action) {
              return CategoryWidgetItem(
                categoryModel: m.list[index],
              );
            }, openBuilder: (context, action) {
              return CategoryDetailPage(
                categoryModel: m.list[index],
              );
            });
          }),
    );
  }
}
